/*
 * @Description: 指导内容弹窗
 * @Author: Zzt
 * @Date: 2022-12-22 14:16:52
 * @LastEditTime: 2023-02-01 09:30:22
 */
import { Button, Descriptions, Modal, Space, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import TextArea from 'antd/lib/input/TextArea';
import { byteConvert } from '@/utils';

const columns: ColumnsType = [
  {
    title: '序号',
    dataIndex: 'fileNo',
    align: 'center',
    key: 'fileNo'
  },
  {
    title: '附件名称',
    dataIndex: 'fileName',
    align: 'center',
    key: 'fileName'
  },
  {
    title: '格式',
    dataIndex: 'fileExt',
    align: 'center',
    key: 'fileExt'
  },
  {
    title: '附件大小',
    dataIndex: 'fileSize',
    align: 'center',
    key: 'fileSize',
    render: (size: number) => byteConvert(size)
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    render: (_, record: any) => (
      <Space size="small">
        <Button size="small" type="link" href={record.fileUrl} target="_blank" download>
          下载
        </Button>
        <Button size="small" type="link" href={record.fileUrl} target="_blank">
          浏览
        </Button>
        {/* <Button size="small" type="link" danger>
          删除
        </Button> */}
      </Space>
    )
  }
];
function Guidance(props: any) {
  const { visible, onClose, data } = props;
  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      title="业务指导"
      visible={visible}
      width={600}
      destroyOnClose
      onCancel={onCancel}
      footer={[]}
    >
      <Descriptions labelStyle={{ fontWeight: 'bold' }} layout="vertical">
        <Descriptions.Item label="说明" span={3}>
          <TextArea
            disabled
            maxLength={2000}
            placeholder={'备注信息描述，最多可填写2000字'}
            showCount={true}
            value={data?.remark}
            style={{ width: '100%' }}
          ></TextArea>
        </Descriptions.Item>
        <Descriptions.Item label="附件" span={3}>
          <Table
            columns={columns}
            dataSource={data?.attachmentJsonDTOS}
            size="small"
            style={{ width: '100%' }}
          ></Table>
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
}
export default Guidance;
